<template>
  <div class="my-cart">
    <h1 class="title1" v-show="titleShow">My Cart</h1>
    <h1 class="title">
      <ul class="tab-ul clearfix">
        <li class="tab-li" :class="{'active':changeLink}" @click="changeItem1">Cashback Items  <span class="link" :class="{'link1':!changeLink}"></span></li>
        <li class="tab-li" :class="{'active':!changeLink}" @click="changeItem2">Items</li>
        <li class="num2" v-if="isShowTotalNum">{{totalNum}}</li>
      </ul>
    </h1>
    <div class="router-box">
      <router-view></router-view>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getCartAllTotal} from 'api/requests'
  export default {
        data() {
          return {
            titleShow: true,
            changeLink: true,//顶部栏的小横线切换
            totalNum : 0,
            isShowTotalNum : false,
          }
        },
        created() {
          if(this.$route.fullPath === '/my-cart/promotion'){
            this.changeLink = false
          }else if(this.$route.fullPath === '/my-cart' || this.$route.fullPath === '/my-cart/cashback'){
            this.changeLink = true
            this.$nextTick(() => {
              this._getCartAllTotal()
            })
          }
        },
        methods: {
          _getCartAllTotal() {
            getCartAllTotal().then(res => {
              let leng =res.totalPromotionProductCount
              if(leng && leng > 0){
                this.isShowTotalNum = true
                this.totalNum = leng ;    //商品数量（不计单品数量）
              }

            })
          },
          changeItem1(){
            this.changeLink = true
            this.$router.push({
              path:'/my-cart/cashback'
            })
          },
          changeItem2(){
            this.changeLink = false
            this.isShowTotalNum = false
            this.$router.push({
              path:'/my-cart/promotion'
            })
          }
        },
        watch:{
          '$route' (to,from){
            if(to.path === '/my-cart'|| to.path === '/my-cart/cashback' ){
              this.changeLink= true
            }
          }
        },
        components: {

        },
      }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .my-cart
    width:100%;
    padding-bottom:95px;
    .title1
      font-size: 36px;
      color: #333333
      padding-top: 30px;
    .title
      padding-top: 15px;
      .tab-ul
        width:100%
        position:relative
        .tab-li
          font-size:20px;
          line-height: 55px;
          color: #bbb
          margin-right:80px;
          float:left
          display:inline-block
          cursor:pointer
          position:relative
          .link
            display:inline-block
            width:45%;
            border-bottom:3px solid #18823a
            position:absolute
            left: 26%
            bottom:0
            -webkit-transform: none;
            transform: none;
            transition: left .1s ease-in-out,width .1s ease-in-out
          .link1
            left: 150%
        .active
          color:#18823a
        .num2
          display:inline-block
          border-radius:50%
          width:14px
          height:14px
          line-height:14px
          text-align: center
          background:#fa4c4d
          color:#fff
          position: absolute
          left: 273px
          top: 14px
          font-size:12px


</style>
